<template>
  <!-- 图片展示区 -->
  <div>
    <h2>运动项目</h2>
    <div class="three-column-wrap">
      <div class="column" v-for='item in items'><!-- 循环元素 -->
        <div class="img-wrap"><img :src='item.url' alt=""></div>
        <p class="img-desc">{{item.title}}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'threecolumn',
  //data即使为空也不能省略
  data () {
    return {
      items:[]
    }
  },
  mounted:function(){
    var path = window.location.pathname;
    console.log(path);  
    var that = this;
    var domainName = "http://www.wangry.com:3001";
    if(path=='/'){
      $.get(domainName+"/sanlie",{type:"1",index:"1"},function(result){
        that.items = result;
      });
    }else if(path=='/Past'){
      $.get(domainName+"/sanlie",{type:"2",index:"1"},function(result){
        that.items = result;
      });
    }else if(path=='/Soon'){
      $.get(domainName+"/sanlie",{type:"3",index:"1"},function(result){
        that.items = result;
      });
    }
  }
}
/*同一个组件结构，根据路由不同，为数组变量赋予不同的值,赋值在mounted生命周期钩子中进行
问题：如何写方法并调用？
*/

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h2{
    font-size: 20px;
    padding-top: 10px;
  }
  .three-column-wrap{
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
  }
  .column{
    width: 32%;
    float: left;
    margin-right: 2%;
    margin-top: 10px;
    overflow:hidden;
    font-size: 16px;
  }
  .column:nth-child(3n){
    margin-right: 0;
  }
  .column:nth-child(3n){
    margin-right: 0;
  }
  .column img{
    width: 100%;
    display: block;
  }
  .img-desc{
    width: 100%;
    max-height: 60px;
    overflow: hidden;
    padding:10px 0;
    border:1px solid rgba(0,0,0,0.3);
    box-sizing:border-box;
  }

  @media screen and (max-width: 768px) {
    h2{
      font-size: 15px;
    }
    .column{
      font-size: 12px;
    }
  }
</style>
